<template>
    <!-- 手动生成试题 -->
    <div id="select-template" class="jx-content">
        <el-dialog v-if="xiangQing" width="900px" class="dialog-chapter-details" title="章节详情" :visible.sync="dialogXiangqing">
            <div class="dialog-content" style="height:420px;padding-bottom:30px;;">
                <el-scrollbar :native="false">
                    <div class="dialog-box chapter-details-box">
                        <div class="dialog-item muban-content" style="border:none;">
                            <div class="muban-title">章节分数分配列表</div>
                            <div class="muban-item chapter-details-item" v-for="(item,index) in xiangQing.content" :key="index">
                                <div class="chapter-details-name" :title="item.name">{{ item.name }} </div>
                                <div class="chapter-details-score">{{ item.content.map(obj => obj.count*obj.score).reduce((total,num) => total+num) }}分</div>
                                <div v-for="(item2,index2) in item.content" :key="index2">
                                    {{ item2.typeName }} {{ item2.count }} 题
                                </div>
                            </div>
                            <div class="muban-score">试卷总分数：{{ xiangQing.score }}分</div>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" :width="dialogModalSwitch?'1200px':'600px'" class="dialog-modal" title="添加模板" :visible.sync="dialogModal">
            <div class="dialog-content">
                <div class="switch-box" :class="{ 'switch-box-true': !dialogModalSwitch }">
                    <el-switch @change="switchClick" v-model="dialogModalSwitch" inactive-text="按章节选择"></el-switch>
                </div>
                <div class="dialog-box">
                    <div class="dialog-item" :class="{ 'item-bg': dialogModalSwitch }">
                        <el-form ref="form" label-width="">
                            <!-- 不带章节 -->
                            <el-form-item v-if="!dialogModalSwitch" v-for="item in modelData" :key="item.typeName" class="form-item-flex">
                                <span>{{ item.typeName }}数量</span>
                                <el-input @keyup.native="provingCount(item,'count')" v-model.number="item.count" :disabled="!item.questionNum"></el-input>
                                <span class="question-num">题库中{{ item.questionNum }}题</span>
                                <span>每题分数</span>
                                <el-input @keyup.native="proving(item,'score')" v-model.number="item.score"></el-input>
                            </el-form-item>
                            <div v-show="!dialogModalSwitch" class="question-left-score">
                                试卷总分数： {{ noChapterScore }}分
                            </div>
                            <!-- 带章节 -->
                            <el-form-item v-if="dialogModalSwitch" label="章节名称 :" class="zhangjie">
                                <el-select @change="selectChange" v-model="chapterValue" placeholder="请选择章节">
                                    <el-option v-for="item in chapterList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <div v-if="dialogModalSwitch">
                                <!--左-->
                                <div v-if="chapterValue">
                                    <el-form-item class="form-item-flex" v-for="(item,index) in chapterModelInputData" :key="index">
                                        <span>{{ item.typeName }}数量</span>
                                        <el-input @keyup.native="provingCount(item,'count')" :disabled="!item.questionNum" v-model.number="item.count"></el-input>
                                        <span class="question-num">题库中{{ item.questionNum }}题</span>
                                        <span>每题分数</span>
                                        <el-input @keyup.native="proving(chapterModelScoreData[index],'score')" v-model.number="chapterModelScoreData[index].score"></el-input>
                                    </el-form-item>
                                </div>
                            </div>
                        </el-form>
                    </div>
                    <!--右侧-->
                    <div v-show="dialogModalSwitch" class="dialog-item muban-content">
                        <el-scrollbar ref="scrollbar" wrap-class="list" wrap-style="" view-style="" view-class="view-box" :native="false">
                            <div>
                                <div class="muban-title muban-right">章节分数分配列表</div>
                                <!-- 带章节 -->
                                <div v-for="(item,index) in chapterModelData" :key="item.name">
                                    <div v-if="chapterScore(item.content,index)" class="muban-item muban-right">
                                        <div class="muban-name" :title="item.name">{{ item.name }}</div>
                                        <div class="muban-chapter-score">{{ chapterScore(item.content,index) }}分</div>
                                        <div v-for="obj in item.content" :key="obj.typeName">
                                            {{ filterTi(obj.typeName) }} {{ Number(obj.count) }}题
                                        </div>
                                    </div>
                                </div>
                                <div class="muban-score">试卷总分数：{{ chapterScoreNum }}分</div>
                            </div>
                        </el-scrollbar>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="addModel">保存模板</el-button>
            </span>
        </el-dialog>
        <div class="select-content">
            <div class="btn-group text-right btn-group-top">
                <div class="button-style" @click="switchClick();dialogModal = true">添加模板</div>
            </div>
            <div class="radio-box" @change="radioChange">
                <el-radio v-model="radio" label="2">无章节模板</el-radio>
                <el-radio v-model="radio" label="1">带章节模板</el-radio>
            </div>
            <div class="modal-list">
                <!-- 带章节 -->
                <div v-if="radio == 1 && modelList.length" class="block">
                    <el-carousel trigger="click" height="270px" :autoplay="false" :loop="false" indicator-position="none">
                        <!-- 一个里面放俩 -->
                        <el-carousel-item v-for="(item,index) in modelList" :key="index">
                            <el-row :gutter="20">
                                <!-- 遍历这俩 -->
                                <el-col :span="12" v-for="(value,index2) in modelList[index]" :key="index2">
                                    <div class="grid-content bg-purple">
                                        <div @click="choseModel(value);addClass(index,index2)" :class="{active:index2==current2&&index==current}" class="look-question-content has-zhangjie">
                                            <div class="look-question-title fs16 fbold text-left">章节分数分配列表</div>
                                            <!-- 遍历每一章节 -->
                                            <div class="look-question-hidden">
                                                <div class="look-question-item2" v-for="(value3,index3) in value.content" :key="index3">
                                                    <div class="question-item2-title beyond-hiding" :title="value3.name">{{ value3.name }}</div>
                                                    <div class="question-item2-score" v-if="value3.content">
                                                        {{ value3.content.map(obj => obj.count*obj.score).reduce((total,num) => total+num) }}分
                                                    </div>
                                                    <!-- 遍历章节里所有题 -->
                                                    <div class="question-item2-box">
                                                        <div class="" v-for="(value4,index4) in value3.content" :key="index4">
                                                            {{ value4.typeName }} {{ value4.count }} 题
                                                        </div>
                                                    </div>
                                                </div>
                                                <div v-if="value.content.length > 4" class="chapter-dian">...</div>
                                            </div>
                                            <div class="look-question-operation">
                                                <a href="javascript:;" @click="showXiangQing(value)">详情</a>
                                                <a href="javascript:;" @click="delModel(value)">删除</a>
                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div v-else-if="radio == 1 && modelList.length == 0" class="nodata-muban">
                    请添加模板，模板定义系统<br/> 随机生成试题的规则或者手动选题的约束规则~
                </div>
                <!-- 不带章节 -->
                <div v-if="radio == 2 && modelList.length" class="block">
                    <el-carousel :loop="false" trigger="click" height="270px" :autoplay="false" indicator-position="none">
                        <!-- 一个里面放4个 -->
                        <el-carousel-item v-for="(item,index) in modelList" :key="index">
                            <el-row :gutter="20">
                                <!-- 遍历这4个 -->
                                <el-col :span="6" v-for="(value,index2) in item" :key="index2">
                                    <div class="grid-content bg-purple">
                                        <div @click="choseModel(value);addClass2(index2)" class="look-question-content" :class="{active:current3==index2}">
                                            <!-- 遍历每种题 -->
                                            <div class="look-question-item" v-for="(value3,index3) in value.content" :key="index3">
                                                <div>{{ value3.typeName }}</div>
                                                <div>{{ value3.count }}题</div>
                                                <div>每题{{ value3.score }}分</div>
                                            </div>
                                            <div class="look-question-score">总分数：{{ value.score }}分</div>
                                            <div class="look-question-operation">
                                                <span style="color:#c0c4cc;" v-if="value.isPreset">预制</span>
                                                <a v-else href="javascript:;" @click="delModel(value)">删除</a>
                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div v-else-if="radio == 2 && modelList.length == 0" class="nodata-muban">
                    请添加模板，模板定义系统<br/> 随机生成试题的规则或者手动选题的约束规则~
                </div>
            </div>
        </div>
        <div class="btn-group text-center">
            <el-button :disabled="!passModelInfo" @click="goNextPage" class="button-style">确 定</el-button>
        </div>
    </div>
</template>
<script>
    import axios from "axios";
    import $ from "jquery";
    export default {
        data() {
            return {
                //添加class
                current: -1,
                current2: -1,
                current3: -1,
                //展示
                //弹出框带章节题数
                chapterModelInputData: [],
                //弹出框带章节分数
                chapterModelScoreData: [
                    {
                        type: 1,
                        typeName: "选择题",
                        score: 0
                    },
                    {
                        type: 2,
                        typeName: "判断题",
                        score: 0
                    },
                    {
                        type: 3,
                        typeName: "填空题",
                        score: 0
                    },
                    {
                        type: 4,
                        typeName: "简答题",
                        score: 0
                    },
                    // {
                    //   type: 5,
                    //   typeName: "编程题",
                    //   score: 0
                    // },
                    {
                        type: 6,
                        typeName: "实验题",
                        score: 0
                    }
                ],
                //弹出框无章节题数和分数
                modelData: [
                    {
                        type: 1,
                        typeName: "选择题",
                        count: 0,
                        score: 0,
                        questionNum: 0
                    },
                    {
                        type: 2,
                        typeName: "判断题",
                        count: 0,
                        score: 0,
                        questionNum: 0
                    },
                    {
                        type: 3,
                        typeName: "填空题",
                        count: 0,
                        score: 0,
                        questionNum: 0
                    },
                    {
                        type: 4,
                        typeName: "简答题",
                        count: 0,
                        score: 0,
                        questionNum: 0
                    },
                    // {
                    //   type: 5,
                    //   typeName: "编程题",
                    //   count: 0,
                    //   score: 0,
                    //   questionNum: 0
                    // },
                    {
                        type: 6,
                        typeName: "实验题",
                        count: 0,
                        score: 0,
                        questionNum: 0
                    }
                ],
                //章节列表
                chapterList: [],

                //映射
                //弹出框带章节映射
                chapterModelData: [],

                xiangQing: null,
                //到选题页面传模板id，AfterSelectTemplate
                passModelInfo: "",
                //章节值
                chapterValue: "",
                //章节名称
                name: "",
                //所有模板列表
                modelList: [],
                radio: "2",
                //添加模板弹出框
                dialogModal: false,
                dialogWidth: "600px",
                //弹出框开关
                dialogModalSwitch: false,
                //章节详情弹出
                dialogXiangqing: false,
                sizeForm: {
                    name: "",
                    region: "",
                    date1: "",
                    date2: "",
                    delivery: false,
                    type: [],
                    resource: "",
                    desc: ""
                },
                reqForm: {
                    isChapterModel: false
                },
                params: {
                    params: this.reqForm
                },
                //添加模板请求
                addModelForm: {
                    //是否带章节
                    isChapterModel: true,
                    //模板内容
                    content: "",
                    score: 0
                },

                //带章节发送数组
                modelDataTrue: [],
                //暂存章节信息
                oldChapterObj: null
                //消息框是否开启
                //isProving:true,
            }
        },
        computed: {
            //无章节求和
            noChapterScore() {
                let that = this;
                let modelData = that.modelData;
                return modelData.map(item => item.score * item.count).reduce((total, num) => total + num);
            },
            //带章节求和
            chapterScoreNum() {
                let that = this;
                let sum = 0;
                let chapterModelData = that.chapterModelData;
                let chapterModelScoreData = that.chapterModelScoreData;
                if (chapterModelData.length) {
                    sum = chapterModelData.map(item => item.content.map((item2, index2) => item2.count * chapterModelScoreData[index2].score).reduce((total, num) => total + num)).reduce((total, num) => total + num);
                }
                return sum;
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.getModel();
                this.getChapterList();
                //获取题型题目数量
                this.getQuestionNum();
            },
            //radio改变
            radioChange() {
                this.passModelInfo = "";
                this.getModel();
            },
            //清除带章节数据
            clearChapterModelInputData() {
                let that = this;
                //清空chapterModelData
                $.each(that.chapterModelData, function(i, d) {
                    d.chapterScore = 0;
                    $.each(d.content, function(i2, d2) {
                        d2.count = 0;
                        d2.score = 0;
                    });
                });
                if (that.chapterModelInputData) {
                    that.chapterModelInputData.forEach((item, index) => {
                        item.count = 0;
                        that.chapterModelScoreData[index].score = 0;
                    });
                }
                //chapterModelScoreData
            },
            //过滤题字
            filterTi(str) {
                let result = "";
                if (str && typeof str == "string") {
                    result = str.replace(/题/g, "");
                }
                return result;
            },
            //限制input框只能输入正整数
            provingCount(item, prop) {
                let that = this;
                //限制输入数字
                let reg = /^[0-9]+$/;
                let isInt = reg.test(item[prop]);
                if (!isInt) {
                    item[prop] = 0;
                    that.$message.warning("只能输入整数");
                }

                let questionNum = item.questionNum;
                let isQuesNum = item[prop] > questionNum;
                if (isQuesNum) {
                    item[prop] = 0;
                    that.$message.warning("题目数量不能多于题库");
                }
                //限制不能大于题库数量
            },
            //限制input框只能输入正整数
            proving(item, prop) {
                let that = this;
                let reg = /^[0-9]+$/;
                let isInt = reg.test(item[prop]);
                if (!isInt) {
                    item[prop] = 0;

                    //isProving为false才弹出提示框
                    // if(!that.isProving){
                    //   return;
                    // }
                    that.$message({
                        type: "warning",
                        message: "只能输入整数"
                        // onClose:function(){
                        //   that.isProving = true;
                        // },
                    });
                    // that.isProving = false;
                }
                if (item[prop] > 100) {
                    item[prop] = 0;
                    that.$message({
                        type: "warning",
                        message: "分数不能大于100"
                    });
                }
            },
            //*****弹出框*****
            //点击开关点击事件
            switchClick(val) {
                let that = this;
                //清空章节输入框
                let modelData = that.modelData;
                $.each(modelData, function(i, d) {
                    d.count = 0;
                    d.score = 0;
                });
                //清空章节select
                that.chapterValue = "";

                //清空带章节
                that.clearChapterModelInputData();
                //切换到带章节
                // if (val === true) {
                //   //清空不带章节
                // } else {
                // }
            },
            //
            //无章节获取题库中题数
            getQuestionNum() {
                var that = this;
                axios.get("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/course-test/question-count").then(function(res) {
                    if(res.status === 200) {
                        if (res.data.code === 200) {
                            let questionNumList = res.data.data;
                            that.setModelDataQuestionNum(questionNumList);
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //无章节后台题目数量
            setModelDataQuestionNum(questionNumList) {
                let that = this;
                let modelData = that.modelData;
                if (modelData) {
                    $.each(modelData, function(i, d) {
                        let obj = questionNumList.find(item2 => item2.type === d.type);
                        if (obj) {
                            d.questionNum = obj.count;
                        }
                    })
                }
            },

            //带章节
            //获取章节列表 获取题型题目数量 设置带章节模板
            getChapterList() {
                var that = this;
                axios.get("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/businessType/1/question-repository/chapter-list").then(function(res) {
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            that.chapterList = res.data.data;
                            //设置带章节模板
                            that.setChapterModelData(that.chapterList);
                            //console.log(444);
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            })
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //设置所有章节，所有题型列表
            setChapterModelData(chapterList) {
                let that = this;
                $.each(chapterList, function(i, d) {
                    let content = [
                        {
                            type: 1,
                            typeName: "选择题",
                            count: 0,
                            score: 0
                        },
                        {
                            type: 2,
                            typeName: "判断题",
                            count: 0,
                            score: 0
                        },
                        {
                            type: 3,
                            typeName: "填空题",
                            count: 0,
                            score: 0
                        },
                        {
                            type: 4,
                            typeName: "简答题",
                            count: 0,
                            score: 0
                        },
                        // {
                        //   type: 5,
                        //   typeName: "编程题",
                        //   count: 0,
                        //   score: 0
                        // },
                        {
                            type: 6,
                            typeName: "实验题",
                            count: 0,
                            score: 0
                        }
                    ]
                    d.chapterScore = content[0].count;
                    let obj = {
                        id: d.id,
                        name: d.name,
                        content: content,
                        chapterScore: 0
                    }
                    that.chapterModelData.push(obj);
                })
            },
            //改变章节
            selectChange(val) {
                let that = this;
                //获取章节题目数量并添加至chapterModelInputData中的questionNum
                that.getChapterQuestionNum(val);
            },
            //获取章节题目数量并添加至chapterModelInputData中的questionNum
            getChapterQuestionNum(chapterId) {
                var that = this;
                axios.get("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/course-test/question-count",
                    {
                        params: { chapterId: chapterId }
                    }
                ).then(function(res) {
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            let questionNumList = res.data.data;
                            //查找当前章节，添加对应questionNum
                            that.setChapterQuestionNum(chapterId, questionNumList);
                            //查找当前章节，将右侧对应索引chapterModelData映射给左侧chapterModelInputData
                            that.setChapterModelInputData(chapterId);
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                })
            },
            //设置章节题目数量
            setChapterQuestionNum(chapterId, questionNumList) {
                let that = this;
                let chapterModelData = that.chapterModelData;
                let chapterModelInputData = chapterModelData.find(
                    item => item.id === chapterId
                ).content;
                if (chapterModelInputData) {
                    $.each(chapterModelInputData, function(i, d) {
                        let obj = questionNumList.find(item2 => item2.type === d.type);
                        if (obj) {
                            d.questionNum = obj.count;
                        } else {
                            d.questionNum = 0;
                        }
                    });
                }
            },
            //查找当前章节，将右侧对应索引chapterModelData映射给左侧chapterModelInputData
            setChapterModelInputData(chapterId) {
                let that = this;
                let chapterModelData = that.chapterModelData;
                that.chapterModelInputData = chapterModelData.find(
                    item => item.id === chapterId
                ).content;
            },
            //无章节过滤form
            submitFalseModel() {
                let that = this;
                //深拷贝
                let modelData = JSON.parse(JSON.stringify(that.modelData));
                //过滤空值
                let arr = modelData.filter(item => item.count != 0 && item.score != 0);

                that.addModelForm.isChapterModel = false;
                that.addModelForm.score = that.noChapterScore;
                let str = JSON.stringify(arr);
                that.addModelForm.content = str;
            },
            //带章节过滤form
            submitTrueModel() {
                let that = this;
                //let chapterModelData = [...that.chapterModelData];
                //深拷贝
                let chapterModelData = JSON.parse(JSON.stringify(that.chapterModelData));

                //过滤空数据
                let resultAll = chapterModelData.filter((item, index) => {
                    let result = item.content.filter(item2 => {
                        return item2.count != 0;
                    });
                    item.content = result;
                    return item.content.length;
                });
                let chapterModelScoreData = that.chapterModelScoreData;
                if (resultAll) {
                    //给题型填分
                    resultAll.forEach(d => {
                        d.content.forEach(item => {
                            chapterModelScoreData.forEach(item2 => {
                                if (item.type === item2.type) {
                                    item.score = item2.score;
                                }
                            })
                        })
                    })
                    //给章节填总分
                    resultAll.forEach(d => {
                        d.score = d.content.map(item => item.score * item.count).reduce((total, num) => total + num)
                    })
                }
                that.addModelForm.isChapterModel = true;
                let str = JSON.stringify(resultAll);
                that.addModelForm.content = str;
                that.addModelForm.score = that.chapterScoreNum;
            },

            //本章分数
            chapterScore(row, index) {
                //总分
                let that = this;
                let chapterModelScoreData = that.chapterModelScoreData;
                let chapterModelData = that.chapterModelData;
                let sum = 0;
                //本章求和
                if (row) {
                    sum = row.map((item, index2) => item.count * chapterModelScoreData[index2].score).reduce((total, num) => total + num);
                }
                return sum;
            },

            //添加模板保存
            addModel() {
                var that = this;
                let dialogModalSwitch = that.dialogModalSwitch;
                if (dialogModalSwitch) {
                    that.submitTrueModel();
                } else {
                    that.submitFalseModel();
                }
                //至少选择一题
                if (that.addModelForm.content === "[]") {
                    that.$message.warning("至少选择一题");
                    return;
                }
                axios.post("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/course-test/paper-model", that.addModelForm).then(function(res) {
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            that.$message({
                                message: "添加成功",
                                type: "success"
                            });
                            that.dialogModal = false;
                            if (that.dialogModalSwitch) {
                                that.radio = "1";
                            } else {
                                that.radio = "2";
                            }
                            that.getModel();
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },

            //*****模板列表*****
            //获取所有模板 后台请求
            getModel() {
                var that = this;
                let radio = that.radio;
                let isChapterModel = "";
                if (radio == 1) {
                    //带章节
                    isChapterModel = true;
                } else {
                    //不带章节
                    isChapterModel = false;
                }
                that.passModelInfo = null;
                that.current = -1;
                that.current2 = -1;
                that.current3 = -1;
                axios.get("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/course-test/paper-model",
                    {
                        params: { isChapterModel: isChapterModel }
                    }
                ).then(function(res) {
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            let modelList = res.data.data;
                            $.each(modelList, function(i, d) {
                                d.content = JSON.parse(d.content);
                            });
                            that.modelList = [];
                            that.modelList = modelList;
                            //带章节两个一组
                            if (isChapterModel) {
                                let result = that.sliceArr(modelList, 2);
                                that.modelList = result;
                            } else {
                                //不带章节4个一组
                                let result = that.sliceArr(modelList, 4);
                                that.modelList = result;
                            }
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            //删除 后台请求
            delModel(row) {
                let that = this;
                // console.log(row);
                that.$confirm("是否删除该模板?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    axios.delete("/tes/course/" + this.$localstorage.getLocalStorage("setCourseId") + "/course-test/paper-model/" + row.id).then(function(res) {
                        if (res.status === 200) {
                            if (res.data.code === 200) {
                                that.$message({
                                    message: "删除成功",
                                    type: "success"
                                });
                                //刷新列表
                                that.getModel();
                            } else {
                                that.$message({
                                    message: res.data.message,
                                    type: "error"
                                });
                            }
                        }
                    }).catch(function(err) {
                        if (err.response) {
                            console.log(err.response);
                        }
                    });
                }).catch(() => {});
            },

            //带章节详情
            showXiangQing(val) {
                let that = this;
                // console.log(val);
                that.xiangQing = val;
                that.dialogXiangqing = true;
            },
            //分割数组arr数组，size,int分割成几个一组
            sliceArr(arr, size) {
                let result = [];
                for (let i = 0; i < arr.length; i += size) {
                    result.push(arr.slice(i, i + size));
                }
                return result;
            },
            addClass(index, index2) {
                this.current = index;
                this.current2 = index2;
            },
            addClass2(index) {
                this.current3 = index;
            },
            //点击模板,赋值模板信息
            choseModel(row) {
                this.passModelInfo = row;
            },
            //选择模板跳转页面
            goNextPage() {
                let that = this;
                let passModelInfo = that.passModelInfo;

                // 二期新增
                axios.get("/tes/course/"+that.$localstorage.getLocalStorage("setCourseId")+"/course-test/paper-model/"+passModelInfo.id+"/check").then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if (passModelInfo) {
                            if (that.radio == 1) {
                                //带章节模板
                                that.$router.push({
                                    path: "/Teaching/MyCourses/Examination/afterSelectTemplateChapter",
                                    name: "AfterSelectTemplateChapter",
                                    params: { row: passModelInfo },
                                    query: {
                                        paperName: that.$route.query.paperName,
                                        timeLength: that.$route.query.timeLength
                                    }
                                })
                            } else {
                                //不带章节模板
                                that.$router.push({
                                    path: "/Teaching/MyCourses/Examination/afterSelectTemplateNoChapter",
                                    name: "AfterSelectTemplateNoChapter",
                                    params: { row: passModelInfo },
                                    query: {
                                        paperName: that.$route.query.paperName,
                                        timeLength: that.$route.query.timeLength
                                    }
                                })
                            }
                        } else {
                            that.$message.error("请选择模板");
                        }
                    }else {
                        that.$message({
                            message: res.message,
                            type: "error"
                        });
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });

            }
        }
    };
</script>
<style lang="scss">
    @import "../../../styles/layout/color_variables";
    #select-template {
        .muban-right {
            margin-right: 40px;
        }
        .block {
            overflow-y: hidden;
        }
        width: 1200px;
        margin: 0px auto 30px;
        padding: 30px 10px;
        .btn-group-top {
            margin-right: 60px;
        }
        .radio-box {
            text-align: center;
        }
        .select-content {
            .button-style {
                margin-right: 10px;
            }
            a {
                vertical-align: middle;
            }
            .modal-list {
                padding: 30px 0;
            .el-row {
                padding: 0 70px;
            }
            .look-question-content {
                cursor: pointer;
                color: #727272;
                position: relative;
                // width: 280px;
                height: 270px;
                padding: 20px 34px;
                box-sizing: border-box;
                background: #fff;
                border: 1px solid #e8e8e8;
                .look-question-hidden {
                    position: relative;
                    height: 150px;
                    overflow: hidden;
                }
                .look-question-title {
                    border-bottom: 2px solid #e8e8e8;
                    padding-bottom: 10px;
                }
                .look-question-item {
                    display: flex;
                    justify-content: space-between;
                    line-height: 32px;
                    border-bottom: 1px solid #e8e8e8;
                    padding: 0 6px;
                    font-size: 14px;
                }
                .look-question-item2 {
                    display: flex;
                    // justify-content: space-between;
                    line-height: 32px;
                    border-bottom: 1px solid #e8e8e8;
                    padding: 0 6px;
                    font-size: 14px;
                .question-item2-title {
                    min-width: 100px;
                    max-width: 100px;
                }
                .question-item2-score {
                    min-width: 48px;
                    margin-right: 0;
                }
                .question-item2-box {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    > div {
                        display: inline-block;
                        padding-left: 10px;
                    }
                }
                > div {
                    margin-right: 10px;
                }
                }
                .look-question-score {
                    font-size: 14px;
                    text-align: left;
                    padding-right: 8px;
                    line-height: 50px;
                }
                .look-question-operation {
                    position: absolute;
                    bottom: 0;
                    font-size: 14px;
                    text-align: left;
                    line-height: 50px;
                    padding-right: 8px;
                }
            }
            .look-question-content.has-zhangjie {
                .look-question-item {
                    line-height: 38px;
                }
                .look-question-hidden {
                    position: relative;
                    .chapter-dian {
                        position: absolute;
                        bottom: -5px;
                        left: 0px;
                        padding-left: 7px;
                        width: 100%;
                        background: #fff;
                    }
                }
            }
                .look-question-content.active {
                    border-color: $btn-blue;
                    &:after {
                        font-family: "iconfont";
                        content: "\e614";
                        color: rgb(63, 219, 155);
                        position: absolute;
                        right: 10px;
                        bottom: 0px;
                    }
                }
                .look-question-content:hover {
                    border-color: $btn-blue;
                }
            }
        }
        .upload-file {
            margin: 10px 0 0 0;
            .iconfont {
                font-size: 24px;
                vertical-align: sub;
                color: $blue;
                margin: 0 0 0 10px;
            }
        }
        .btn-group {
        }
        .dialog-modal {
            .dialog-content {
                padding: 0 16px;
                .switch-box {
                    position: relative;
                    margin-bottom: 24px;
                    .is-active {
                        color: #474747;
                    }
                }
                .switch-box-true {
                    margin-left: 30px;
                }
                .dialog-box {
                    display: flex;
                    justify-content: space-between;
                    .dialog-item {
                        width: 540px;
                        height: 300px;
                        background: #fff;
                        box-sizing: border-box;
                        border: 1px solid #fff;
                    .el-input {
                        width: auto;
                    }
                    .el-input__inner {
                        width: 80px;
                    }
                    .form-item-flex {
                        margin-bottom: 12px;
                        .el-form-item__content {
                            display: flex;
                            justify-content: space-between;
                        }
                    }
                    .question-num {
                        color: #c5c5c5;
                        width: 76px;
                    }
                    .muban-title {
                        font-size: 16px;
                        font-weight: bold;
                        border-bottom: 2px solid #e8e8e8;
                        padding-bottom: 10px;
                    }
                    .muban-score {
                        font-size: 16px;
                        font-weight: bold;
                        // text-align: center;
                        color: $blue;
                        line-height: 70px;
                    }
                    .question-left-score {
                        font-size: 16px;
                        font-weight: bold;
                        // text-align: center;
                        color: $blue;
                        line-height: 46px;
                        padding: 20px 0 0 28px;
                    }
                    .muban-item {
                        display: flex;
                        line-height: 52px;
                        border-bottom: 1px solid #e8e8e8;
                        > div {
                            margin-left: 10px;
                        }
                        .muban-name {
                            margin-left: 0;
                            min-width: 140px;
                            max-width: 140px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        .muban-chapter-score {
                            min-width: 48px;
                            max-width: 48px;
                        }
                    }
                    }
                    .muban-content {
                        width: 760px;
                        height: 300px;
                        padding: 20px 0px 0 40px;
                        overflow: hidden;
                        border-color: #e8e8e8;
                        .list {
                            max-height: 300px;
                        }
                    }
                    .dialog-item.item-bg {
                        border-color: #e8e8e8;
                    }
                    .zhangjie {
                        margin: 10px 0 22px 20px;
                        .el-input__inner {
                            width: 180px;
                        }
                    }
                }
            }
            .el-dialog__footer {
                text-align: center;
                padding: 10px 20px 36px;
            }
        }
        //chapter-details
        .dialog-chapter-details {
            .dialog-content {
                padding: 0 16px;
                .switch-box {
                    position: relative;
                    margin-bottom: 24px;
                    .is-active {
                        color: #474747;
                    }
                }
                .switch-box-true {
                    margin-left: 30px;
                }
                .dialog-box {
                    display: flex;
                    .dialog-item {
                        height: 400px;
                        background: #fff;
                        box-sizing: border-box;
                        border: 1px solid #fff;
                    .el-input {
                        width: auto;
                    }
                    .el-input__inner {
                        width: 80px;
                    }
                    .form-item-flex {
                        margin-bottom: 12px;
                        .el-form-item__content {
                            display: flex;
                            justify-content: space-between;
                        }
                    }
                    .question-num {
                        color: #c5c5c5;
                        width: 76px;
                    }
                    .muban-title {
                        font-size: 16px;
                        font-weight: bold;
                        border-bottom: 2px solid #e8e8e8;
                        padding-bottom: 10px;
                    }
                    .muban-score {
                        font-size: 16px;
                        font-weight: bold;
                        text-align: center;
                        color: $blue;
                        line-height: 70px;
                    }
                    .question-left-score {
                        font-size: 16px;
                        font-weight: bold;
                        text-align: center;
                        color: $blue;
                        line-height: 46px;
                    }
                        .muban-item {
                            display: flex;
                            line-height: 52px;
                            border-bottom: 1px solid #e8e8e8;
                            > div {
                                margin-left: 10px;
                            }
                            .chapter-details-name {
                                min-width: 220px;
                                max-width: 220px;
                                margin-left: 0;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            .chapter-details-score {
                                width: 44px;
                            }
                        }
                    }
                    .muban-content {
                        width: 100%;
                        padding: 20px 40px 0;
                        border-color: #e8e8e8;
                    }
                    .dialog-item.item-bg {
                        border-color: #e8e8e8;
                    }
                    .zhangjie {
                        margin: 10px 0 22px 20px;
                        .el-input__inner {
                            width: 180px;
                        }
                    }
                }
            }
            .el-dialog__footer {
                text-align: center;
                padding: 10px 20px 36px;
            }
        }
        //啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    }
</style>
